import React, { Component } from 'react';

class App extends Component {
  // constructor (props) { // Useless constructor
  //   super(props)
  //   this.state = {}
  // }
  state = { count: 100 }
  // static getDerivedStateFromProps (props, state) { // 一般不使用
  //   // getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
  //   // 它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
  //   // state 的值在任何时候都取决于 props
  // }

  componentDidMount () {
    // 等同于 vue中的 mounted
    // 数据请求，实例化操作，DOM操作，定时器，计时器，订阅数据变化
    // 修改状态
    this.setState({ count: this.state.count + 100 })
  }

  shouldComponentUpdate (nextProps, nextState) {
    // 可以作为react组件的性能优化的手段，但是也要慎用
    return true
  }
  // getSnapshotBeforeUpdate(prevProps, prevState) {
  //   // 在最近一次渲染输出（提交到 DOM 节点）之前调用。
  //   // 它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。
  //   // 此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。
  // }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 参照vue中 updated
    // 实例化操作，DOM操作, 特定条件可以请求数据以及修改数据
    // if (this.props.userID !== prevProps.userID) {
    //   this.fetchData(this.props.userID);
    // }
  }

  componentWillUnmount () {
    // 参照vue  beforeDestory
    // 清理对象，取消订阅，消除定时器计时器
    // 当count的值等于210的时候销毁组件
  }
  render() {
    // 挂载阶段 依据初始化数据渲染数据
    // 更新阶段 当该组件的状态或者属性发生改变时触发此函数，也就输数据的改变引起视图的二次渲染
    return (
      <div>
        <p>{ this.state.count }</p>
        <button onClick={ () => {
          if (this.state.count === 210) {
            console.log('销毁组件')
            // 销毁组件
            this.props.root.unmount()
          } else {
            this.setState({ count: this.state.count + 1 } )
          }
        } }>加</button>
      </div>
    );
  }
}

export default App;